import React, {useState, useEffect} from 'react';
import dynamic from 'next/dynamic';
import PropTypes from 'prop-types';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import {makeStyles} from '@material-ui/core/styles';
import {upperFirstLetter} from '@utils/utils';
import {Label} from "@material-ui/icons";

const useStyles = makeStyles(theme => ({
    'form-control-menu': {
        marginBottom: theme.spacing(2),
        minWidth: 120,
        width: 'calc(100%)',
    },
    'form-control-option': {
        width: 250,
    },
    'select-empty': {
        marginTop: theme.spacing(2),
    },
}));

DeviceSelect.propTypes = {
    deviceType: PropTypes.string.isRequired,
    onChange: PropTypes.func,
};

export default function DeviceSelect({onChange}) {
    const classes = useStyles();
    const handleChange = (event) => {
        onChange(event.target.value);
    };

    return (
        <div>
            {
                <FormControl className={classes['form-control-menu']}>
                    <InputLabel id={`bitrate-input-label`}>{`选择码率`}</InputLabel>
                    <Select
                        labelId={`bitrate-input-label`}
                        id={`bitrate-select`}
                        value={0}
                        onChange={handleChange}
                        label={`Select`}
                    >
                        <MenuItem value={0}>200kbps</MenuItem>
                        <MenuItem value={1}>300kbps</MenuItem>
                        <MenuItem value={2}>800kbps</MenuItem>
                        <MenuItem value={3}>900kbps</MenuItem>
                        <MenuItem value={4}>1500kbps</MenuItem>
                        <MenuItem value={5}>2000kbps</MenuItem>
                    </Select></FormControl>
            }
        </div>
    );
}
